<template>
    <div class="cover"
         :style="{height:`${pdfHeight}px`}">
         <el-button @click="htmlToJpg">svg->jpg</el-button>
        <div class="convert-to-jpg">
            <SvgIcon name="icondaochu"></SvgIcon>
        </div>
        <div class="to-print"></div>
        <img src="../../assets/logo1.jpg"
             width="160"
             height="40"
             alt="">
        <div class="content">
            <div>尽职调查工作清单</div>
            <div>2022.09</div>
        </div>
        <div class="foot">
            <div>dsfsdgsdsfsdfsdfsdf</div>
            <div>落款落款落款落款落款落款落款落款落款落款落款</div>
        </div>
    </div>
</template>

<script>
import { Button } from 'element-ui'
import html2Canvas from 'html2canvas'
export default {
	components: {
		ElButton: Button
	},
    props: {
        pdfHeight: {
            type: Number,
            default: 1415
        }
    },
    data () {
        return {}
    },
    methods: {
        htmlToJpg () {
            const canvas = document.querySelector('.to-print')
            const screenWidth = parseFloat(window.getComputedStyle(canvas).width)
            const problematic = document.querySelector('.convert-to-jpg')
            html2Canvas(problematic, {
                scale: 2480 / screenWidth // 2480px - size for A4 paper, 300 dpi
            }
            ).then(function (canvas) {
                var img = canvas.toDataURL('image/jpeg')
                problematic.innerHTML = '<img src="' + img + '" class="img">'
            })
        }

    }
}
</script>
<style lang='less' scoped>
.cover {
    width: 100%;
    // height: 1415px;
    background-image: url('../../assets/pdf-bg.jpg');
    background-size: 100% 100%;
    position: relative;

    img {
        position: absolute;
        top: 60px;
        left: 90px;
    }

    .content {
        position: absolute;
        top: 374px;
        left: 90px;

        & > div:first-child {
            margin-bottom: 40px;
            font-family: 'Microsoft YaHei UI';
            font-style: normal;
            font-weight: 700;
            font-size: 70px;
        }

        & > div:last-child {
            width: 354px;
            padding-bottom: 42px;
            font-family: 'Persagy';
            font-style: normal;
            font-weight: 400;
            font-size: 36px;
            border-bottom: 1px solid #8b949e;
        }
    }

    .foot {
        position: absolute;
        bottom: 81px;
        left: 90px;
        font-family: 'Microsoft YaHei UI';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
    }
}
</style>
